<template>
  <a-card :bordered="false" class="withdrawal">
    <div class="theknightSearch table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="getList">
        <a-row :gutter="24">
          <a-col :md="5" :sm="5">
            <a-form-item label="姓名" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-input placeholder="请输入姓名搜索" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="5">
            <a-form-item label="状态" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-select default-value="请选择" style="width: 120px" @change="handleChange">
                <a-select-option value="1" key="1">
                  待审核
                </a-select-option>
                <a-select-option value="2" key="2">
                  审核通过
                </a-select-option>
                <a-select-option value="3" key="3">
                  被驳回
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6">
            <a-button type="primary" @click="getList" icon="search">搜索</a-button>
            <a-button style="margin-left: 8px" @click="refresh">刷新</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <section class="table">
      <a-table ref="table" size="middle" bordered rowKey="objectSid" :columns="columns"
        :pagination="ipagination" @change="changePage" :dataSource="List" :loading="loading">
        <span slot="action" slot-scope="record">
          <a @click="audit(record)">信息审核</a>
        </span>
      </a-table>
    </section>
    <a-modal v-model="personalAudit" title="个人认证" :footer="null">
      <section style="height:60vh;overflow-y: scroll;padding-bottom:20px;">
        <a-form-model :labelCol="{span: 4}" :wrapperCol="{span: 14, offset: 1}">
          <a-form-model-item label="服务类型">
            <label>{{chooseOrder.officialType}}</label>
          </a-form-model-item>
          <a-form-model-item label="姓名">
            <label>{{chooseOrder.name}}</label>
          </a-form-model-item>
          <a-form-model-item label="身份证号">
            <label>{{chooseOrder.idNo}}</label>
          </a-form-model-item>
          <a-form-model-item label="身份证正面">
            <label><img :src="chooseOrder.idFront" alt=""></label>
          </a-form-model-item>
          <a-form-model-item label="身份证反面">
            <label><img :src="chooseOrder.idReverse" alt=""></label>
          </a-form-model-item>
        </a-form-model>
      </section>
      <a-button type="primary" @click="rejected" :loading="noLoading">
        审核驳回
      </a-button>
      <a-button type="primary" style="margin-left:20px" @click="okpersonalAudit" :loading="okLoading">
        通过审核
      </a-button>
    </a-modal>
    <a-modal v-model="enterpriseAudit" :footer="null" title="企业认证" width="40%">
      <section style="height:60vh;overflow-y: scroll;padding-bottom:20px;">
        <a-form-model :labelCol="{span: 5}" :wrapperCol="{span: 14, offset: 1}">
          <a-form-model-item label="服务类型">
            <label>{{chooseOrder.officialType}}</label>
          </a-form-model-item>
          <a-form-model-item label="企业名称">
            <label>{{chooseOrder.company}}</label>
          </a-form-model-item>
          <a-form-model-item label="统一社会信用代码">
            <label>{{chooseOrder.businessLicenseNo}}</label>
          </a-form-model-item>
          <a-form-model-item label="注册地址">
            <label>{{chooseOrder.registration}}</label>
          </a-form-model-item>
          <a-form-model-item label="法人姓名">
            <label>{{chooseOrder.name}}</label>
          </a-form-model-item>
          <a-form-model-item label="法人身份证号码">
            <label>{{chooseOrder.idNo}}</label>
          </a-form-model-item>
          <a-form-model-item label="身份证正面">
            <label><img :src="chooseOrder.idFront" alt=""></label>
          </a-form-model-item>
          <a-form-model-item label="身份证反面">
            <label><img :src="chooseOrder.idReverse" alt=""></label>
          </a-form-model-item>
          <a-form-model-item label="营业执照">
            <label><img :src="chooseOrder.businessLicense" alt=""></label>
          </a-form-model-item>
        </a-form-model>
      </section>
      <a-button type="primary" @click="rejected">
        审核驳回
      </a-button>
      <a-button type="primary" style="margin-left:20px" @click="okpersonalAudit">
        通过审核
      </a-button>
    </a-modal>
  </a-card>
</template>
<script>
  import Vue from 'vue'
  import {
    postAction,
    getAction
  } from '@/api/manage'
  import store from '@/store'
  export default {
    data() {
      return {
        loading: false,
        personalAudit: false,
        enterpriseAudit: false,
        noLoading: false,
        okLoading: false,
        queryParam: {
          pageNo: 1,
          pageSize: 10,
          status: "",
          name: ""
        },
        List: [{
          objectSid:1
        }],
        chooseOrder: {
          imageUrl: ''
        }, // 选中的数据
        isBranchFlag: false, // 当前登录用户是否分站用户
        columns: [{
            title: '姓名',
            align: "center",
            dataIndex: 'name',
          },
          {
            title: '身份证号',
            align: "center",
            dataIndex: 'idNo',
          },
          {
            title: '状态',
            align: "center",
            dataIndex: 'status',
            customRender: (value, row, index) => {
              let obj;
              if (value == 1) {
                obj = '待审核'
              } else if (value == 2) {
                obj = '审核通过'
              } else if (value == 3) {
                obj = '被驳回'
              }
              return obj;
            }
          },
          {
            title: '认证类型',
            align: "center",
            dataIndex: 'type',
            customRender: (value, row, index) => {
              let obj;
              if (value == 1) {
                obj = '个人'
              } else if (value == 2) {
                obj = '企业'
              }
              return obj;
            }
          },
          {
            title: '操作',
            dataIndex: '',
            key: 'x',
            scopedSlots: {
              customRender: 'action'
            }
          },
        ],
        //标记页数；页码
        ipagination: {
          current: 1,
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          total: 0
        },
        url: {
          list: "/memberAuth/list",
          audit: "/memberAuth/audit"
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      // 打开信息审核弹框
      audit(e) {
        this.chooseOrder = e
        if (e.type == 1) { //个人认证
          this.personalAudit = true
        } else { //企业认证
          this.enterpriseAudit = true
        }
      },
      // 审核通过
      okpersonalAudit() {
        this.okLoading = true;
        postAction(this.url.audit, {
          objectSid: this.chooseOrder.objectSid,
          status: 2
        }).then((res) => {
          console.log(res);
          this.okLoading = false;
          if (res.success) {
            this.personalAudit = false;
            this.enterpriseAudit = false;
            this.$message.success(res.message);
            this.getList();
          }
        })
      },
      // 审核驳回
      rejected() {
        this.noLoading = true;
        postAction(this.url.audit, {
          objectSid: this.chooseOrder.objectSid,
          status: 3
        }).then((res) => {
          console.log(res);
          this.noLoading = false;
          if (res.success) {
            this.personalAudit = false;
            this.enterpriseAudit = false;
            this.getList();
          }
        })
      },
      cancel(e) {

      },
      getList() {
        console.log("ss");
        this.loading = true;
        getAction(this.url.list, this.queryParam).then((res) => {
          console.log(res);
          this.loading = false;
          if (res.success) {
            this.List = res.result.records;
            this.ipagination.total = res.result.total;
          }
        })
      },
      onClose() {},
      // 代理列表改变分页
      changePage(pagination) {
        console.log(pagination);
        this.ipagination.current = pagination.current
        this.queryParam.pageNo = pagination.current;
        this.queryParam.pageSize = pagination.pageSize;
        this.getList();
      },
      // 选择用户类型
      handleChange(e) {
        this.queryParam.status = e;
      },
      // 刷新
      refresh() {

      },
    }
  }
</script>
<style lang="less" scoped>
  .modal {
    .modeal-title {
      text-align: center;
      font-size: 20px;
      font-weight: 700;
    }

    button {
      position: absolute;
      right: 50px;
    }

    .pooltable {
      padding-top: 50px;
    }
  }

  .withdrawal {
    .time {
      margin-top: 30px;
    }

    .theknightSearch {
      padding: 15px 10px;

      .ant-form-item {
        width: 100%;
      }
    }

    .table-page-search-wrapper .ant-form-inline .ant-form-item {
      margin-bottom: 0px !important;
    }
  }
</style>